<template>
  <div class="app-container">
    <div class="body-div">
      <el-button type="primary" style="float: right" @click="back()"
        >返回</el-button
      >
      <el-button
        type="primary"
        style="float: right; margin-right: 10px"
        @click="audit()"
        >核对</el-button
      >
      <el-tabs
        v-model="activeName"
        @tab-click="tabClick"
        type="card"
        v-if="false"
      >
        <el-tab-pane
          v-for="(tab, index) in tabData"
          :key="index"
          :label="tab.conditionType"
          :name="tab.conditionName"
        >
        </el-tab-pane>
      </el-tabs>
      <div style="padding: 10px">
        <div style="display: flex; margin-bottom: 10px">
          <div class="shuxian"></div>
          <span class="headtitle">设计基础</span>
        </div>
        <span style="font-size: small">一套脱硝装置负荷入口烟气量和成分</span>
        <div style="margin-top: 15px">
          <el-table :data="firstTable" border style="width: 100%">
            <el-table-column
              v-for="column in firstColumn"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              align="center"
              header-align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <div style="display: flex; margin-top: 15px">
          <div class="shuxian"></div>
          <span class="headtitle">催化剂选型</span>
        </div>
        <div style="margin-top: 10px; font-size: small">
          <span>烟气竖直方向流动</span>
        </div>

        <div style="margin-top: 15px">
          <div v-for="(item, index) in listData" :key="index">
            <el-table
              :data="item.catalystsResultList"
              border
              style="width: 100%; margin-top: 15px"
            >
              <el-table-column
                prop="batchId"
                label="计算ID"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="name"
                label="催化剂型号 DNX-LD"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="catalystsVolume"
                label="每台装置催化剂体积, m3"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="reactorCount"
                label="反应器数"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="catalystTotalVolume"
                label="每台反应催化剂体积, m3"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="reactorFloor"
                label="每台反应器催化剂层数"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="unitMatrixCount"
                label="催化剂单元阵列"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="singleReactorUnitCount"
                label="每台反应器每层催化剂单元数量"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="moduleName"
                label="单元型号"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="moduleSize"
                label="单元尺寸 (W×H×D), mm"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="catalystsHeight"
                label="每层催化剂净高, mm"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="reactorSize"
                label="反应器尺寸 (L × W ), m"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="weight"
                label="每个单元的毛重, kg"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="weight"
                label="每台反应器内单元数量"
                align="center"
                header-align="center"
              />
            </el-table>
          </div>
        </div>
        <div style="display: flex; margin-top: 15px; margin-bottom: 10px">
          <div class="shuxian"></div>
          <span class="headtitle">性能保证</span>
        </div>
        <span style="font-size: small"
          >实际运行工况不差于表 1
          规定的条件，并且满足性能保证的前提要求时，催化剂可以做如下表性能保证：</span
        >
        <div style="margin-top: 15px">
          <div v-for="(item, index) in listData" :key="index">
            <el-table
              :data="item.performanceResultList"
              border
              style="width: 100%; margin-top: 15px"
            >
              <el-table-column
                prop="lifetime"
                label="催化剂化学寿命, hours"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="outNox"
                label="出口 NOx, mg/Nm3 dry @3% O2"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="outNh3"
                label="氨逃逸率, mg/Nm3 dry @3% O2"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="nh3Consume"
                label="氨消耗量, kg/h"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="so2"
                label="SO2 氧化率, %"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="pressure"
                label="催化剂层总压降, Pa 212"
                align="center"
                header-align="center"
              />
              <el-table-column
                prop="batchNo"
                label="计算号"
                align="center"
                header-align="center"
              />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import request from "@/utils/request";

const route = useRoute();
const router = useRouter(); //页面跳转用
const id = route.params.id;
const batchId = route.params.batchId;

const batchIdList =
  route.query.batchIdList && route.query.batchIdList.length > 0
    ? route.query.batchIdList.split(",")
    : [];

const formData = ref({});
const computeList = ref({});
const allComputeList = ref({});

const firstColumn = ref([]);
const firstTable = ref([
  {
    label: "烟气流量, Nm3/h, wet",
  },
  {
    label: "烟气温度, °C",
  },
  {
    label: "烟气压力, mmH2O(G) 4℃",
  },
  {
    label: "NOx, NO2 kg/h ",
  },
  {
    label: "NOx present as NO2,%",
  },
  {
    label: "O2, % Vol wet",
  },
  {
    label: "H2O, % Vol wet",
  },
  {
    label: "CO, kg/h wet",
  },
  {
    label: "CO2, % Vol wet",
  },
  {
    label: "SO2, mg/Nm3 dry @3% O2",
  },
  {
    label: "SO3, mg/Nm3 dry @3% O2",
  },
  {
    label: "烟气含尘量, mg/Nm3 dry",
  },
]); //设计基础表格数据

const activeName = ref(""); //当前选中的tab
const tabData = ref([]); //tab数据

const listData = ref([]);

function back() {
  router.go(-1);
  //router.push(`/project/makeProject/${id}/${batchId}`);
}

function audit() {
  ElMessageBox.confirm("核对无误该方案，是否确认该设计方案？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "稍后",
    type: "warning",
  })
    .then(() => {
      const editStatus = ref({});
      editStatus.value.projectId = id;
      editStatus.value.projectStatus = "6";
      request({
        url: "/system/project/editProject",
        method: "post",
        data: editStatus.value,
      }).then((response) => {
        ElMessage.success("核对成功！");
        console.log(response);
      });
    })
    .catch(() => {});
}

function tabClick(tab, event) {
  activeName.value = tab.props.name;
  computeList.value = allComputeList.value.filter(
    (item) => item.conditionType === activeName.value
  )[0];
  //处理表格数据
  firstTable.value = [
    {
      name: "烟气流量, kg/h, wet",
      data: computeList.value.quantityFlow,
    },
    { name: "烟气温度, °C", data: computeList.value.temperature },
    {
      name: "烟气压力, mmH2O(G) 4℃",
      data: computeList.value.pressure,
    },
    { name: "NOx, NO2 kg/h wet", data: computeList.value.nox },
    { name: "NOx present as NO2,%", data: computeList.value.no2 },
    { name: "O2, % Vol wet", data: computeList.value.o },
    { name: "H2O, % Vol wet", data: computeList.value.h2o },
    { name: "CO, kg/h wet", data: computeList.value.co },
    { name: "CO2, % Vol wet", data: computeList.value.co2 },
    { name: "SO2, mg/Nm3 dry @3% O2", data: computeList.value.so2 },
    { name: "SO3, mg/Nm3 dry @3% O2", data: computeList.value.so3 },
    { name: "烟气含尘量, mg/Nm3 wet", data: computeList.value.pm },
  ];
}

function getList() {
  const firstColumns = [{ prop: "label", label: "设计参数" }];
  request({
    url: "/system/project/compare/batch",
    method: "post",
    data: {
      projectId: id,
      batchIds: batchId == "0" ? batchIdList : [batchId],
      // projectId: 65,
      // batchIds: [1, 2],
    },
  }).then((response) => {
    if (response.code == 200) {
      if (response.data.length > 0) {
        listData.value = response.data;
        for (let i = 0; i < response.data.length; i++) {
          //先处理列
          firstColumns.push({
            prop: "data" + i,
            label: response.data[i].inResult.conditionType,
          });
          firstTable.value[0]["data" + i] =
            response.data[i].inResult.quantityFlow;
          firstTable.value[1]["data" + i] =
            response.data[i].inResult.temperature;
          firstTable.value[2]["data" + i] = response.data[i].inResult.pressure;
          firstTable.value[3]["data" + i] = response.data[i].inResult.nox;
          firstTable.value[4]["data" + i] = response.data[i].inResult.no2;
          firstTable.value[5]["data" + i] = response.data[i].inResult.o;
          firstTable.value[6]["data" + i] = response.data[i].inResult.h2o;
          firstTable.value[7]["data" + i] = response.data[i].inResult.co;
          firstTable.value[8]["data" + i] = response.data[i].inResult.co2;
          firstTable.value[9]["data" + i] = response.data[i].inResult.so2;
          firstTable.value[10]["data" + i] = response.data[i].inResult.so3;
          firstTable.value[11]["data" + i] = response.data[i].inResult.pm;
        }
      }
      firstColumn.value = firstColumns;
    }
  });
}

onMounted(() => {
  getList();
});
</script>

<style scoped>
.headtitle {
  margin-left: 10px;
  font-size: 18px;
}

.app-container {
  padding: 10px;
  height: 100%;
  width: 100%;
}

.body-div {
  height: calc(100% - 20px);
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow-y: auto;
}

.shuxian {
  height: 23px;
  width: 5px;
  background-color: #355af0;
}

.form-title {
  font-size: 14px;
  font-weight: 400;
  color: #395df0;
}

.form-text {
  font-size: 14px;
  font-weight: 400;
  color: #727272;
}
</style>
